<template>
    <div class="settings-box">
        <!-- <div class="settings-title">
            <h1>设置</h1>
            <blue-btn :clickEvent="refresh" text="应用"></blue-btn>
        </div> -->
        <add-page :addClickEvent="handleSaveClickEvent" ref="addPageParent"></add-page>
        <!-- <store-other-page></store-other-page> -->
        <m-toast ref="mToast"></m-toast>
    </div>
</template>
<script>
    import "./index.css";
    import AddPage from "../../edit-components/AddPage";
    import BlueBtn from "../../edit-components/BlueButton";
    import Toast from "../../edit-components/Toast";
    import getId from "../../utils/initComponentsId";
    import { MessageBox } from 'element-ui';
    import AdPop from "../../edit-components/AdPop";
    import StoreOtherPage from "../../edit-components/StoreOtherPage";
    export default {
        deta () {
            return {
            }
        },
        computed: {
            //用来检测是否需要上传特殊模板
            needUploadTemplate() {
                return this.$store.getters["gw/getNeedUploadSpecialTemplate"];
            },
            //返回当前启用模板，后续规则可能会改变
            templateParams() {
                return this.$store.getters["gw/getSpecialTemplateParams"];
            }
        },
        methods: {
            //根据页面类型返回不同的页面初始化的obj
            getPageObj(pageType, id) {
                if (pageType === "NewThematicActivities") {
                    return {
                        config: {
                            id
                        },
                        header: [
                            {
                                type: "activitiesbanner",
                                index: 0,
                                id: id + "-activitiesbanner",
                                config: {}
                            },
                            {
                                type: "TabHead",
                                index: 1,
                                id: id + "-TabHead",
                                config: {
                                    pages: [
                                    ]
                                }
                            }
                        ],
                        content: [],
                        footer: []
                    }
                } else {
                    return {
                        config: {
                            id
                        },
                        header: [
                        ],
                        content: [],
                        footer: []
                    }
                }
            },
            //添加按钮的事件
            saveAddPages() {
                //第一步，向对应的页面类型的config对象添加一个属性，保存当前页面的title和path
                let type = this.$store.getters["gw/getAddPageType"];
                let title = this.$store.getters["gw/getAddPageTitle"];
                if (!type) {
                    this.infoToast("请选择页面类型");
                    return;
                }
                if (!title) {
                    this.infoToast("请输入页面名称");
                    return;
                }
                let templateParams = this.templateParams;
                let domTree;
                if (this.needUploadTemplate) {
                    //需要上传一套专门用来存储添加页面的模板数据
                    templateParams = {
                        tpConfig: {config: {}},
                        tpDesc: "specialtemplateforaddpages"
                    }
                    domTree = templateParams.tpConfig;
                } else {
                    domTree = JSON.parse(templateParams.tpConfig);
                }
                if (!domTree.config) {
                    domTree.config = {
                        addPages: []
                    }
                } else if (!domTree.config.pages) {
                    domTree.config.pages = [];
                }
                //向config中添加一个配置数组，便于router遍历生成对应的path
                // console.log("打印templateParams",templateParams)
                console.log("domTree.config",domTree.config)
                let id = getId();
                domTree.config.pages.push({
                    title,
                    type,
                    path: id,
                    id,
                    updateTm:this.templateParams.updateTm,
                    tpState:this.templateParams.tpState,
                });
                //直接生成对应的页面
                let pageObj = this.getPageObj(type, id);
                domTree[id] = pageObj;
                //设置pageConfig
                // this.$store.commit("setDomTree", domTree);
                let success = (data) => {
                    //重置本地数据
                    this.resetTemplateParams(data);
                    this.infoToast("保存成功");
                    this.$refs.addPageParent.hideModel()
                }
                let fail = (errMsg = "保存失败") => {
                    this.infoToast(errMsg);
                    this.$refs.addPageParent.hideModel()
                }
                let p = {
                    ...templateParams,
                    tpConfig: JSON.stringify(domTree),
                }
                this.updateDomTreeToDB(success, fail, p);
            },
            //添加按钮的事件
            handleSaveClickEvent() {
                this.saveAddPages();
            },
            refresh() {
                MessageBox.alert('需要重新载入页面来使设置起效', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {
                        let port = window.location.port ? ":" + window.location.port : "";
                        window.location.href = window.location.href.indexOf("localhost") > -1 ||
                            window.location.href.indexOf("127.0.0.1") > -1 ? 
                                `http://${window.location.hostname + port}?env=e` : 
                                    `http://${window.location.hostname + port}/static/NJ/H5/index.html?env=e`;
                    }
                });
            },
            //显示Toast的方法
			infoToast(msg) {
				this.$refs.mToast.toast(msg);
			},
        },
        created(){
            // console.log("打印templateParams",this.templateParams)
        },
        components: {
            AddPage,
            AdPop,
            BlueBtn,
            "m-toast": Toast,
            StoreOtherPage
            // elbutton
        }
    }
</script>
<style scoped>
    .settings-box{
        height:100%;
        /* overflow-y: auto */
    }
</style>

